<meta charset="UTF-8">
<style>
    body{
        padding:20px;
    }
    *{
        margin:0px;
        padding:0px;
    }
    .clearfix:after{
        clear:both;
        display:table;
        content:"";
    }
    .fl{
        float:left;
    }
    .fr{
        float:right;
    }
    .ss{
        margin-top:15px;
        display:none;
        transition:all .3s;
        opacity:0;
    }
    .ss img{
        width:50px;
        height:50px;
        border-radius:50%;
    }

    .ss .pic{
        margin-right:10px;
        width:15%;
        text-align:right;
    }
    .ss .txt{
        border:1px solid #ccc;
        width:80%;
        padding:10px;
        border-radius:3px;
    }
    .ss .name,.ss .time{
        margin-right:10px;
    }
    .ss .fline{
        margin-bottom:10px;
    }
    .del{
        cursor:pointer;
    }
</style>
<textarea cols="48" rows="12" id="shuoshuo"></textarea>
<br /><br />
<input type="button" value="发表" id="fabiao" />
<div id="hehe"></div>
<div class="ss clearfix" id="ss1">
    <div class="fl pic"><img src="100.jpg" /></div>
    <div class="fl txt">
        <div class="clearfix fline">
            <span class="fl name">张政</span>
            <div class="fl cnt">真由善而美</div></div>
        <div class="clearfix sline"><span class="fl time">13:11</span>
            <div  class="fr">
            <span>赞</span>
            <span class="del">删除</span>
        </div></div>
    </div>
</div>
<script>
//  for(var i=1;i<=1000;i++){
//      document.write("<img src='http://qzonestyle.gtimg.cn/qzone/em/e"+i+".gif' />");
//  }
    var oldss ;

    //当单击发表按钮时
    fabiao.onclick = function(){
       // 从ss1中找出内容div将内容置换为最新的用户输入输入的数据
        ss1.getElementsByClassName("cnt")[0].innerHTML
            = shuoshuo.value;
        //开始复制,将其命名为ss
        var ss = ss1.cloneNode(true);
        ss.getElementsByClassName("del")[0].onclick = function(){
            var deletedNode = this.parentNode.parentNode.parentNode.parentNode;

            setTimeout(function(){
                deletedNode.style.opacity = 0;
                deletedNode.style.height = "0px";
                setTimeout(function(){
                    deletedNode.parentNode.removeChild(deletedNode);
                },200);
            },100);



        };
        //消除id,以防止id重复
        ss.id = "";
        //ss1是隐藏，而被复制出来的新元素需要显示出来
        ss.style.display = "block";

        setTimeout(function(){
            ss.style.opacity = 1;
        },100);
        //将说说的文本域清空
        shuoshuo.value = "";
        //如果已经有了说说了
        if(document.getElementsByClassName("ss").length>1){
            //就在这个说说之前插入最新说说
            document.body.insertBefore(ss,oldss);
        }else{
            //如果没有说说，则直接在网页末尾追加说说
            document.body.appendChild(ss);
        }

        //将最新说说设置oldss
        oldss = ss;
    };


</script>
